import React, { useEffect, useState } from 'react';
import'./SalaryFormWork.scss'
import * as service from '../../../api/fromwork'
import { message } from 'antd';
interface Props{
 
}
function SalaryFormWork(props:Props) {

    let [data,setData] = useState([])
    // let data:any = []

    let fromwork = async ()=>{
        let res = await service.formwork_list()
        console.log(res.data.data)
        setData(res.data.data)
        // data = res.data.data
        setData(render(res.data.data))
        console.log(data)
    }
    let bianji = async(item:any,)=>{
        let {statuss,...newItem} = item
        newItem.statuss = '1'
        console.log(newItem)
        let res = await service.formwork_bianji(newItem)
        fromwork()
        message.success({content:'编辑成功'})
    }
    let delete1 = async (item:any) =>{
        let res = await service.formwork_delete({id:item})
        fromwork()
        message.success({content:'删除成功'})

    }
    useEffect(()=>{
        fromwork()
    },[])

    let render=(res:any)=>{
       return( res?.map((item:any,index:any)=>{
            return(
                <div className="item" key={index}>
                <div className="top">
                    <div className="zuo">
                        {item.title} <span style={{display:(item.statuss) == 1 ? "inline-block":"none"}}>默认</span>
                    </div>
                    <div className="you">
                        <span className='blue' onClick={()=>{bianji(item)}}>编辑</span>
                        <span className='red' onClick={()=>{delete1(item.id)}}>删除</span>
                    </div>
                </div>
                <div className="middle">
                    <div className='left'>
                    薪资项目:
                    </div>
                    <div className="right">
                        {
                            item.classs.a1.split(',').map((item:any,index:any)=>{
                                return(
                                    <span key={index}>{item}</span>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
            )
        }))
    }
    return (
        <div className='salaryFormWork'>
            {
               data
            }
        </div>
    );
}

export default SalaryFormWork;